<template>
  <div>
    <div style="width: 1000px; background-color: #242424">
      <ul class="nav3">
        <li>飙升榜</li>
        <li>新歌榜</li>
        <li>原创榜</li>
        <li>热歌榜</li>
      </ul>
    </div>
    <div style="width: 1000px; background-color: forestgreen; height: auto">
      <div style="width: 900px; height: 200px; margin: auto">
        <!-- 图片 -->
        <div style="width: 150px; float: left; margin: 20px">
          <img
            src="../../assets/images/Param/18696095720518497.jpg"
            alt="飙升榜"
            width="150"
            height="150"
          />
        </div>
        <!-- 按钮组 -->
        <div style="width: 700px; float: left; margin-top: 30px">
          <h1>飙升榜</h1>
          <p>最近更新：05月31日 （刚刚更新）</p>
          <p>
            <input id="Button1" type="button" value="播放" />
            <input id="Button1" type="button" value="下载" />
            <input id="Button1" type="button" value="(1000)" />
          </p>
        </div>
      </div>
      <div style="width: 1000px; background-color: red; height: 400px">
        <div style="width: 1000px; line-height: 40px">
          <div
            style="
              color: #242424;
              background-color: white;
              height: 40px;
              width: 100%;
            "
          >
            <p style="float: left; margin-left: 20px">
              <span style="font-size: 20px; color: #242424; margin-right: 20px"
                >歌单列表</span
              >100首歌
            </p>
            <p style="float: right; margin-right: 20px">
              播放:<span style="color: red">100000</span>次
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>

.nav3 {
  width: 800px;
  height: 80px;
  margin: auto;
}

.nav3 li {
  float: left;
  height: 80px;
  width: 200px;
  text-align: center;
  line-height: 80px;
}

.nav3 li:hover {
  background-color: #000;
}
</style>